<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#a1{width: 230px;height: 120px;border-radius: 3px 3px 3px 3px;box-shadow: 0px 0px 35px 0px #dcdcdc;float: left;
			margin-left: 1%;margin-top: 20px;padding: 10px;}
			#a3{width: 23%;height: 120px;border-radius: 3px 3px 3px 3px;box-shadow: 0px 0px 35px 0px #dcdcdc;float: left;
			margin-left: 1%;margin-top: 20px;background-color: #6495ED;padding: 10px;}
			#a2{width: 640px;height: 500px;float: right;margin: 15px; position: relative;overflow: hidden;}
			* {box-sizing:border-box;}
			.carousel img {
            width: 100%;
            height: auto;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
			object-fit: cover;
			}
			.carousel img.active {
				display: block;
			}
			ul {list-style-type: none;}
			body {font-family: Verdana,sans-serif;}
			#i1{height: 220px;}
			#btoom{width: 100%;height: 40px;margin-top: 40px;font-size: 26px;color: white;}
			#btoom1{width: 100%;height: 40px;margin-top: 40px;font-size: 26px;color: #6495ED;}
			#biao{float: right;font-size: 26px;}
		</style>
	</head>
	<body>
		<div id="a3">
			<font size="4" color="white">全国儿童总人数</font>
			<hr color="#666" size="2" width="30%" align="left">
			<center>
			<div id="btoom">
			<b>1432234234523人</b>
			<div id="biao">
				<b>Ⅰ</b>
			</div>
			</div></center>
		</div>
		<div id="a1">
			<font size="4" color="#6495ED">儿童平均心理健康度</font>
			<hr color="#666" size="2" width="30%" align="left">
			<center>
			<div id="btoom1">
			<b>78%</b>
			<div id="biao">
				<b>Ⅱ</b>
			</div>
			</div></center>
		</div>
		<div id="a2">
			<div class="carousel">
				<img src="img/parent1.jpg" class="active"></img>
				<img src="img/parent2.jpg"></img>
				<img src="img/parent3.jpg"></img>
				<img src="img/parent4.jpg"></img>
				<img src="img/parent5.jpg"></img>

			</div>
			
		</div>
		<div id="a1">
			<font size="4" color="#6495ED">当地儿童平均心理健康度</font>
			<hr color="#666" size="2" width="30%" align="left">
			<center>
			<div id="btoom1">
			<b>80%</b>
			<div id="biao">
				<b>Ⅲ</b>
			</div>
			</div></center>
		</div>
		<div id="a3">
			<font size="4" color="white">当地儿童总数</font>
			<hr color="#666" size="2" width="30%" align="left">
			<center>
			<div id="btoom">
			<b>56342145人</b>
			<div id="biao">
				<b>Ⅳ</b>
			</div>
			</div></center>
		</div>
		<div id="a3">
			<font size="4" color="white">儿童健康咨询专家</font>
			<hr color="#666" size="2" width="30%" align="left">
			<center>
			<div id="btoom">
			<b>12313人</b><div id="biao">
				<b>Ⅴ</b>
			</div>
			</div></center>
		</div>
		<div id="a1">
			<font size="4" color="#6495ED">今天总接诊儿童</font>
			<hr color="#666" size="2" width="30%" align="left">
			<center>
			<div id="btoom1">
			<b>1834245人</b>
			<div id="biao">
				<b>Ⅵ</b>
			</div>
			</div></center>
		</div>
		



		<script>
			let currentIndex = 0;
			const images = document.querySelectorAll('.carousel img');
			const totalImages = images.length;
	
			function showNextImage() {
				images[currentIndex].classList.remove('active');
				currentIndex = (currentIndex + 1) % totalImages;
				images[currentIndex].classList.add('active');
			}
	
			setInterval(showNextImage, 3000); // 每3秒切换一次图片
		</script>
	</body>
</html>
